<template>
  <div class="login_container">
    <p @click="handleClickJumpMinePage">取消</p>
    <div class="second-floor">
      <div class="form-table-function">
        <van-form @submit="onSubmit">
          <van-field
            v-model="state.username"
            name="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="state.password"
            type="password"
            name="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div class="login-btn">
            <van-button round block type="info" native-type="submit"
              >注册</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
  setup(props, context) {
      const state = reactive({
      username: '',
      password: ''
    });
    // 用于跳转路由
    const router = useRouter();
    const handleClickJumpRegistryPage = () => {
      router.push('/registry');
    }
    const handleClickJumpMinePage = () => {
      router.push('/login');
    };
    return {
      handleClickJumpRegistryPage,
      handleClickJumpMinePage,
      state
    }
  }
});
</script>

<style lang='scss'>
.login_container {
  width: 100%;
  height: 100%;
  p {
    padding: 20px 15px 50px 15px;
  }
  .second-floor {
    width: 100%;
    height: auto;
    padding: 10px 38px;
    text-align: center;
    .form-table-function {
      width: 100%;
      height: auto;
      .login-btn {
        margin-top: 16px;
        margin-bottom: 20px;
        .van-button {
          width: 300px;
          height: 40px;
          color: #fff;
          border: none;
          background: #b5ecc4;
          border-radius: 2px;
        }
      }
      .van-field__body {
        input {
          width: 300px;
          height: 40px;
          margin-bottom: 10px;
          border: none;
          border-bottom: 1px solid #e7e7e7;
        }
      }
    }
  }
}
</style>
